<template>
  <view class="container">
    <cu-custom bgColor="bg-gradual-blue" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">五音疗疾-土</block>
	 
    </cu-custom>
    <!-- {{user_id}} -->
    <view class="MainBox">
      <video
        id="myVideo"
        :src="zhengnianclass.vidUrl"
        controls
        :poster="zhengnianclass.vidImg"
        @ended="onVideoEnded"
      ></video>
      
      <RatingModal
        :show="showRatingModal"
        :identity-card="identity_card"
        :video-name="zhengnianclass.title"
        @submit-rating="submitRating"
      />
      
      <view class="cssBox" style="position: relative;">
        <view class="leftBox">
          <view class="margin-bottom-sm">
            <text class="text-bold text-xl">{{zhengnianclass.title}}</text>
          </view>
          <view>
            <view class="fl margin-right text-df text-gray">
              <u-icon name="play-circle" style="margin-right: 5rpx;"></u-icon>
              <text>{{zhengnianclass.studyNum}}</text>
            </view>
            <view class="fl margin-right text-df text-gray">
              <u-icon name="order" style="margin-right: 5rpx;"></u-icon>
              <text>{{zhengnianclass.review}}</text>
            </view>
            <view class="fl margin-right text-df text-gray">
              <u-icon name="clock" style="margin-right: 6rpx;"></u-icon>
              <text>{{zhengnianclass.time}}</text>
            </view>
            <view style="clear: both;"></view>
          </view>
        </view>
     <!--   <button hover-class='none' class='rightBox' open-type="share">
          <u-icon label-color="#2979ff" label-size="26" margin-top="12" label-pos="bottom" label="分享一下" name="share" color="#2979ff" size="54"></u-icon>
        </button> -->
      </view>

      <view class="cssBox">
        <view class="margin-bottom-sm">
          <text class="text-bold text-lg">简介：</text>
        </view>
        <text class="text-df">{{zhengnianclass.synopsis}}</text>
      </view>
      
      <view class="cssBox">
        <view class="margin-bottom-sm flex justify-between">
          <text class="text-bold text-lg">选择训练： </text>
          <text class="text-gray text-df">当前训练：{{zhengnianclass.title}}</text>
        </view>
        <view class="courseBox flex justify-around">
          <!-- <view :class="[classid==0 ? 'active' : '']" @click="onclickclass(0)">《知否知否》土音入脾「五脏相音」</view> -->
		  <view :class="[classid==1 ? 'active' : '']" @click="onclickclass(1)">睡不安稳等适听 《知否知否》</view>
          <view :class="[classid==2 ? 'active' : '']" @click="onclickclass(2)">暴饮暴食适听《不染》</view>
          <view :class="[classid==3 ? 'active' : '']" @click="onclickclass(3)">安稳心理，缓解焦虑《千年风雅》《追梦》</view>
          <view :class="[classid==4 ? 'active' : '']" @click="onclickclass(4)">促进消化，健壮脾胃，使血脉通畅防止许多老年病的发生《水姻缘》</view>
          <view :class="[classid==5 ? 'active' : '']" @click="onclickclass(5)">饭后多听，安定情绪，养护中州，缓解焦虑，助益睡眠，安稳身心</view>
          <view :class="[classid==6 ? 'active' : '']" @click="onclickclass(6)">放松减压，助益睡眠，暴饮暴食，或者茶饭不思适听，缓解焦虑，治愈</view>
          <view :class="[classid==7 ? 'active' : '']" @click="onclickclass(7)">放松助眠，缓解焦虑，暴饮暴食茶饭不思，缓解焦虑，养脾健胃，宁心净脑，安稳身心</view>
		  <view :class="[classid==8 ? 'active' : '']" @click="onclickclass(8)">改善面色、失眠、暴饮暴食，食欲不振或茶饭不思，缓解焦虑疲劳，放松助眠，安稳身心，养脾健胃，治愈，土音入脾「五脏相音」</view>
          <view :class="[classid==9 ? 'active' : '']" @click="onclickclass(9)">改善气色，养脾胃促消化安睡眠，安稳身心，疏肝解郁，养胃健脾，缓解焦虑。治愈《雪落下的声音》</view>
		  <view :class="[classid==10 ? 'active' : '']" @click="onclickclass(10)">缓解焦虑，暴饮暴食茶饭不思寝食难安适听，安稳身心，助益睡眠，治愈，土音入脾「五脏相音」</view>
		  <view :class="[classid==11 ? 'active' : '']" @click="onclickclass(11)">缓解紧张和焦虑，暴饮暴食或茶饭不思适听，助益睡眠，安稳身心，土音入脾「五脏相音」</view>
		  <view :class="[classid==12 ? 'active' : '']" @click="onclickclass(12)">缓解紧张焦虑，调整情绪，脸色不好、失眠、胃酸胀痛适听《穿越时空的思念》，土音入脾「五脏相音」</view>
		  <view :class="[classid==13 ? 'active' : '']" @click="onclickclass(13)">降火凝神，暴饮暴食或茶饭不思者多听，缓解焦虑，安稳身心，宁心安神，土音入脾「五脏相音」</view>
		  <view :class="[classid==14 ? 'active' : '']" @click="onclickclass(14)">若茶饭不思或暴饮暴食可常听用，使人品温和，宽松且广大《大鱼》安稳身心，缓解焦虑，助益睡眠，放松压力</view>
		  <view :class="[classid==15 ? 'active' : '']" @click="onclickclass(15)">土音入脾，安稳身心，缓解焦虑，助益睡眠，放松減压，暴饮暴食或茶饭不思可多听用，国风音乐，五音疗疾</view>
		  <view :class="[classid==16 ? 'active' : '']" @click="onclickclass(16)">土音入脾，脾喜音乐，提高食欲，促进消化，平心静气，曲埙为土音调为羽调，可降火去燥，安稳身心，缓解焦虑「五脏相音」</view>
		  <view :class="[classid==17 ? 'active' : '']" @click="onclickclass(17)">胃不好必听的养胃曲  埙音入脾胃经，《空山静》最佳欣赏时间：9 00-11 00</view>
		  <view :class="[classid==18 ? 'active' : '']" @click="onclickclass(18)">埙曲加长版《尘》，缓解焦虑紧张，安稳心理，助益睡眠，放松心情</view>
		  <view :class="[classid==19 ? 'active' : '']" @click="onclickclass(19)">埙音能促进全身气机的协调与稳定调节脾胃之气的升降，防止气的升降絮乱，缓解焦虑和压力，安稳身心，治愈，土音入脾「五脏相音」</view>
		  <view :class="[classid==20 ? 'active' : '']" @click="onclickclass(20)">养脾健胃，安稳身心，缓解焦虑，保肺气，利肾水，补肺利肾泄心火，治愈，土音入脾「五脏相音」</view>
		  <view :class="[classid==21 ? 'active' : '']" @click="onclickclass(21)">有暴饮暴食或食欲不振者可常听用。土音入脾，缓解焦虑，安稳心理，助益睡眠，静心冥想，放松治愈</view>
		  <view :class="[classid==22 ? 'active' : '']" @click="onclickclass(22)">助益睡眠，气色不佳，焦虑失眠适用，缓解紧张，安稳身心，释放压力，治愈，土音入脾「五脏相音」</view>
        </view>
      </view>
    </view>

    <!-- 弹窗 -->
  <!--  <view v-if="showModal" class="modal">
      <view class="modal-content">
        <text class="text-bold text-lg">选择前六周的训练：</text>
        <view class="modal-options">
          <view @click="onclickclass7(1)">第一周：生活中的正念-正念饮食</view>
          <view @click="onclickclass7(2)">第二周：身体扫描</view>
          <view @click="onclickclass7(3)">第三周：正念呼吸（3分钟呼吸空间练习）</view>
          <view @click="onclickclass7(4)">第四周：正念静坐</view>
          <view @click="onclickclass7(5)">第五周：正念行走</view>
          <view @click="onclickclass7(6)">第六周：减压蝴蝶拍</view>
        </view>
        <button @click="closeModal">关闭</button>
      </view>
    </view> -->
  </view>
</template>

<script>
import RatingModal from './RatingModal.vue';

export default {
  components: { RatingModal },
  data() {
    return {
      classid: 1,
      zhengnianclass: {},
      showRatingModal: false, // 用于控制弹窗的显示
      identity_card: '', // 假设的身份证号
	  user_id: '', 
	  userinfo:{},
      showModal: false // 用于控制弹窗的显示
    };
  },
  onLoad() {
	 
    this.zhengnianclass = {
          title: '安神助眠，胃酸胀，面色差，睡不安稳等适听 《知否知否》安稳身心，缓解焦虑，土音入脾「五脏相音」',
          titleen: 'putaogan',
          studyNum: '335',
          review: '35',
          time: '2024-8-8',
          synopsis: '安神助眠，胃酸胀，面色差，睡不安稳等适听 《知否知否》安稳身心，缓解焦虑，土音入脾「五脏相音」',
          vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/1/Cover.jpg',
          vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/1/安神助眠，胃酸胀，面色差，睡不安稳等适听 《知否知否》安稳身心，缓解焦虑，土音入脾「五脏相音」_清晰 480P.mp4',
		  train_time_sum:'175'
        };
  },
  mounted() {
    this.identity_card = uni.getStorageSync("identity_card");
	this.user_id = uni.getStorageSync("user_id");
	this.userinfo = uni.getStorageSync("userinfo");
  },
  methods: {
    videoErrorCallback: function(e) {
      uni.showModal({
        content: e.target.errMsg,
        showCancel: false
      });
    },
    onVideoEnded1() {
      this.showRatingModal = true;
	  if (this.zhengnianclass["titleen"]=='jyjs'){
	  		  this.showRatingModal = false;
	  }
    },
    submitRating(rating) {
		
      this.showRatingModal = false;
	 
	  
      const ratingText = rating["rating"] === 1 ? '一般' : rating["rating"] === 2 ? '较好' : '非常好';
	  const suggestion1=rating["suggestion"];
      const requestData = {
        identity_card: this.identity_card,
        video_name: this.zhengnianclass.titleen,
        rating: ratingText,
		suggestion:suggestion1,
		user_id:this.user_id,
		train_time_sum:this.zhengnianclass.train_time_sum,
		username:this.userinfo["data"]["userinfo"][1],
		admission_no:this.userinfo["data"]["userinfo"][2],
		phone:this.userinfo["data"]["userinfo"][29]
      };
		console.log(requestData)
	
      uni.request({
        url: 'http://202.127.200.31:30010/user/train/rate', // 请求的 URL
        method: 'POST', // 请求方法
        data: requestData, // 发送的数据
        header: {
          'Content-Type': 'application/json' // 设置请求头为 JSON 格式
        },
        success: (res) => {
          console.log('提交成功:', res.data);
          // 使用 uni.showToast 来显示成功信息
          uni.showToast({
            title: '评价提交成功',
            icon: 'success', // 使用 success 图标
            duration: 2000 // 消息框持续时间
          });
        },
        fail: (err) => {
          console.error('提交失败:', err);
          // 使用 uni.showToast 来显示失败信息
          uni.showToast({
            title: '提交失败，请重试',
            icon: 'none', // 无图标
            duration: 2000 // 消息框持续时间
          });
        }
      });
    },
    onclickclass(id) {
      console.log(id);
      if (id == 1) {
        this.classid = 1;
        this.zhengnianclass = {
          title: '安神助眠，胃酸胀，面色差，睡不安稳等适听 《知否知否》安稳身心，缓解焦虑，土音入脾「五脏相音」',
          titleen: 'putaogan',
          studyNum: '335',
          review: '35',
          time: '2024-8-8',
          synopsis: '安神助眠，胃酸胀，面色差，睡不安稳等适听 《知否知否》安稳身心，缓解焦虑，土音入脾「五脏相音」',
          vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/1/Cover.jpg',
          vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/1/安神助眠，胃酸胀，面色差，睡不安稳等适听 《知否知否》安稳身心，缓解焦虑，土音入脾「五脏相音」_清晰 480P.mp4',
		  train_time_sum:'175'
        };
      } else if (id == 2) {
        this.classid = 2;
        this.zhengnianclass = {
          title: '安稳身心，助眠安神，最佳聆听时间：进餐或餐后一小时内欣赏，改善气色，养脾健胃，稳定调节脾胃之气，暴饮暴食适听《不染》，土音入脾【五脏相音】',
          titleen: 'stsm',
          studyNum: '335',
          review: '35',
          time: '2024-8-8',
          synopsis: '安稳身心，助眠安神，最佳聆听时间：进餐或餐后一小时内欣赏，改善气色，养脾健胃，稳定调节脾胃之气，暴饮暴食适听《不染》，土音入脾【五脏相音】',
          vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/2/Cover.jpg',
          vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/2/安稳身心，助眠安神，最佳聆听时间：进餐或餐后一小时内欣赏，改善气色，养脾健胃，稳定调节脾胃之气，暴饮暴食适听《不染》，土音入脾【五脏相音】_清晰 480P.mp4',
		  train_time_sum:'144'
        };
      } else if (id == 3) {
        this.classid = 3;
        this.zhengnianclass = {
          title: '安稳心理，缓解焦虑《千年风雅》《追梦》土音入脾「五脏相音」',
          titleen: 'znhx',
          studyNum: '335',
          review: '35',
          time: '2024-8-8',
          synopsis: '安稳心理，缓解焦虑《千年风雅》《追梦》土音入脾「五脏相音」',
          vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/3/Cover.jpg',
          vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/3/安稳心理，缓解焦虑《千年风雅》《追梦》土音入脾「五脏相音」_清晰 480P.mp4',
		  train_time_sum:'63'
        };
      } else if (id == 4) {
        this.classid = 4;
        this.zhengnianclass = {
          title: '正念静坐',
          titleen: 'znjz',
          studyNum: '335',
          review: '35',
          time: '2024-8-8',
          synopsis: '正念静坐',
          vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/4/Cover.jpg',
          vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/4/促进消化，健壮脾胃，使血脉通畅防止许多老年病的发生《水姻缘》治愈，土音入脾「五脏相音」_清晰 480P.mp4',
		  train_time_sum:'70'
        };
      } else if (id == 5) {
        this.classid = 5;
        this.zhengnianclass = {
          title: '正念行走',
          titleen: 'znxz',
          studyNum: '335',
          review: '35',
          time: '2024-8-8',
          synopsis: '正念行走',
          vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/5/Cover.jpg',
          vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/5/饭后多听，安定情绪，养护中州，缓解焦虑，助益睡眠，安稳身心，治愈，土音入脾「五脏相音」_清晰 480P.mp4',
		  train_time_sum:'94'
        };
      } else if (id == 6) {
        this.classid = 6;
        this.zhengnianclass = {
          title: '放松减压，助益睡眠，暴饮暴食，或者茶饭不思适听，缓解焦虑，治愈，土音入脾，五脏相音',
          titleen: 'hudiepai',
          studyNum: '335',
          review: '35',
          time: '2024-8-8',
          synopsis: '放松减压，助益睡眠，暴饮暴食，或者茶饭不思适听，缓解焦虑，治愈，土音入脾，五脏相音',
          vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/6/Cover.jpg',
          vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/6/放松减压，助益睡眠，暴饮暴食，或者茶饭不思适听，缓解焦虑，治愈，土音入脾，五脏相音_清晰 480P.mp4',
		  train_time_sum:'79'
        };
      } else if (id == 7) {
        this.classid = 7;
        this.zhengnianclass = {
          title: '放松助眠，缓解焦虑，暴饮暴食茶饭不思，缓解焦虑，养脾健胃，宁心净脑，安稳身心，土音入脾「五脏相音」',
          titleen: 'znzh',
          studyNum: '335',
          review: '35',
          time: '2024-8-8',
          synopsis: '放松助眠，缓解焦虑，暴饮暴食茶饭不思，缓解焦虑，养脾健胃，宁心净脑，安稳身心，土音入脾「五脏相音」',
          vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/7/Cover.jpg',
          vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/7/放松助眠，缓解焦虑，暴饮暴食茶饭不思，缓解焦虑，养脾健胃，宁心净脑，安稳身心，土音入脾「五脏相音」_清晰 480P.mp4'
        };
      } else if (id == 8) {
        this.classid = 8;
        this.zhengnianclass = {
          title: '改善面色、失眠、暴饮暴食，食欲不振或茶饭不思，缓解焦虑疲劳，放松助眠，安稳身心，养脾健胃，治愈，土音入脾「五脏相音」',
          titleen: 'znsh',
          studyNum: '335',
          review: '35',
          time: '2024-8-8',
          synopsis: '改善面色、失眠、暴饮暴食，食欲不振或茶饭不思，缓解焦虑疲劳，放松助眠，安稳身心，养脾健胃，治愈，土音入脾「五脏相音」',
          vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/8/Cover.jpg',
          vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/8/改善面色、失眠、暴饮暴食，食欲不振或茶饭不思，缓解焦虑疲劳，放松助眠，安稳身心，养脾健胃，治愈，土音入脾「五脏相音」_清晰 480P.mp4',
		  train_time_sum:'1295'
        };
      } else if (id == 9) {
        this.classid = 9;
        this.zhengnianclass = {
      title: '改善气色，养脾胃促消化安睡眠，安稳身心，疏肝解郁，养胃健脾，缓解焦虑。治愈《雪落下的声音》土音入脾「五脏相音」',
      titleen: 'jyjs',
      studyNum: '335',
      review: '35',
      time: '2024-8-8',
      synopsis: '改善气色，养脾胃促消化安睡眠，安稳身心，疏肝解郁，养胃健脾，缓解焦虑。治愈《雪落下的声音》土音入脾「五脏相音」',
      vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/9/Cover.jpg',
      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/9/改善气色，养脾胃促消化安睡眠，安稳身心，疏肝解郁，养胃健脾，缓解焦虑。治愈《雪落下的声音》土音入脾「五脏相音」_清晰 480P.mp4',
	  train_time_sum:'60'
    };
      }else if (id == 10) {
        this.classid = 10;
        this.zhengnianclass = {
      title: '缓解焦虑，暴饮暴食茶饭不思寝食难安适听，安稳身心，助益睡眠，治愈，土音入脾「五脏相音」',
      titleen: 'jyjs',
      studyNum: '335',
      review: '35',
      time: '2024-8-8',
      synopsis: '缓解焦虑，暴饮暴食茶饭不思寝食难安适听，安稳身心，助益睡眠，治愈，土音入脾「五脏相音」',
      vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/10/Cover.jpg',
      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/10/缓解焦虑，暴饮暴食茶饭不思寝食难安适听，安稳身心，助益睡眠，治愈，土音入脾「五脏相音」_清晰 480P.mp4',
	  train_time_sum:'60'
    };
      }else if (id == 11) {
        this.classid = 11;
        this.zhengnianclass = {
      title: '缓解紧张和焦虑，暴饮暴食或茶饭不思适听，助益睡眠，安稳身心，土音入脾「五脏相音」',
      titleen: 'jyjs',
      studyNum: '335',
      review: '35',
      time: '2024-8-8',
      synopsis: '缓解紧张和焦虑，暴饮暴食或茶饭不思适听，助益睡眠，安稳身心，土音入脾「五脏相音」',
      vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/11/Cover.jpg',
      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/11/缓解紧张和焦虑，暴饮暴食或茶饭不思适听，助益睡眠，安稳身心，土音入脾「五脏相音」_清晰 480P.mp4',
	  train_time_sum:'60'
    };
      }else if (id == 12) {
        this.classid = 12;
        this.zhengnianclass = {
      title: '缓解紧张焦虑，调整情绪，脸色不好、失眠、胃酸胀痛适听《穿越时空的思念》，土音入脾「五脏相音」',
      titleen: 'jyjs',
      studyNum: '335',
      review: '35',
      time: '2024-8-8',
      synopsis: '缓解紧张焦虑，调整情绪，脸色不好、失眠、胃酸胀痛适听《穿越时空的思念》，土音入脾「五脏相音」',
      vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/12/Cover.jpg',
      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/12/缓解紧张焦虑，调整情绪，脸色不好、失眠、胃酸胀痛适听《穿越时空的思念》，土音入脾「五脏相音」_清晰 480P.mp4',
	  train_time_sum:'60'
    };
      }else if (id == 13) {
        this.classid = 13;
        this.zhengnianclass = {
      title: '降火凝神，暴饮暴食或茶饭不思者多听，缓解焦虑，安稳身心，宁心安神，土音入脾「五脏相音」',
      titleen: 'jyjs',
      studyNum: '335',
      review: '35',
      time: '2024-8-8',
      synopsis: '降火凝神，暴饮暴食或茶饭不思者多听，缓解焦虑，安稳身心，宁心安神，土音入脾「五脏相音」',
      vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/13/Cover.jpg',
      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/13/降火凝神，暴饮暴食或茶饭不思者多听，缓解焦虑，安稳身心，宁心安神，土音入脾「五脏相音」_清晰 480P.mp4',
	  train_time_sum:'60'
    };
      }else if (id == 14) {
        this.classid = 14;
        this.zhengnianclass = {
      title: '若茶饭不思或暴饮暴食可常听用，使人品温和，宽松且广大《大鱼》安稳身心，缓解焦虑，助益睡眠，放松压力#中医养生',
      titleen: 'jyjs',
      studyNum: '335',
      review: '35',
      time: '2024-8-8',
      synopsis: '若茶饭不思或暴饮暴食可常听用，使人品温和，宽松且广大《大鱼》安稳身心，缓解焦虑，助益睡眠，放松压力#中医养生',
      vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/14/Cover.jpg',
      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/14/若茶饭不思或暴饮暴食可常听用，使人品温和，宽松且广大《大鱼》安稳身心，缓解焦虑，助益睡眠，放松压力#中医养生#养生_清晰 480P.mp4',
	  train_time_sum:'60'
    };
      }else if (id == 15) {
        this.classid = 15;
        this.zhengnianclass = {
      title: '土音入脾，安稳身心，缓解焦虑，助益睡眠，放松減压，暴饮暴食或茶饭不思可多听用，国风音乐，五音疗疾',
      titleen: 'jyjs',
      studyNum: '335',
      review: '35',
      time: '2024-8-8',
      synopsis: '土音入脾，安稳身心，缓解焦虑，助益睡眠，放松減压，暴饮暴食或茶饭不思可多听用，国风音乐，五音疗疾',
      vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/15/Cover.jpg',
      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/15/土音入脾，安稳身心，缓解焦虑，助益睡眠，放松減压，暴饮暴食或茶饭不思可多听用，国风音乐，五音疗疾_清晰 480P.mp4',
	  train_time_sum:'60'
    };
      }else if (id == 16) {
        this.classid = 16;
        this.zhengnianclass = {
      title: '土音入脾，脾喜音乐，提高食欲，促进消化，平心静气，曲埙为土音调为羽调，可降火去燥，安稳身心，缓解焦虑「五脏相音」',
      titleen: 'jyjs',
      studyNum: '335',
      review: '35',
      time: '2024-8-8',
      synopsis: '土音入脾，脾喜音乐，提高食欲，促进消化，平心静气，曲埙为土音调为羽调，可降火去燥，安稳身心，缓解焦虑「五脏相音」',
      vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/16/Cover.jpg',
      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/16/土音入脾，脾喜音乐，提高食欲，促进消化，平心静气，曲埙为土音调为羽调，可降火去燥，安稳身心，缓解焦虑「五脏相音」_清晰 480P.mp4',
	  train_time_sum:'60'
    };
      }else if (id == 17) {
        this.classid = 17;
        this.zhengnianclass = {
      title: '胃不好必听的养胃曲  埙音入脾胃经，《空山静》最佳欣赏时间：9 00-11 00#中医养生#中医',
      titleen: 'jyjs',
      studyNum: '335',
      review: '35',
      time: '2024-8-8',
      synopsis: '胃不好必听的养胃曲  埙音入脾胃经，《空山静》最佳欣赏时间：9 00-11 00#中医养生#中医',
      vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/17/Cover.jpg',
      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/17/胃不好必听的养胃曲  埙音入脾胃经，《空山静》最佳欣赏时间：9 00-11 00#中医养生#中医#音乐_清晰 480P.mp4',
	  train_time_sum:'60'
    };
      }else if (id == 18) {
        this.classid = 18;
        this.zhengnianclass = {
      title: '埙曲加长版《尘》，缓解焦虑紧张，安稳心理，助益睡眠，放松心情',
      titleen: 'jyjs',
      studyNum: '335',
      review: '35',
      time: '2024-8-8',
      synopsis: '埙曲加长版《尘》，缓解焦虑紧张，安稳心理，助益睡眠，放松心情',
      vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/18/Cover.jpg',
      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/18/埙曲加长版《尘》，缓解焦虑紧张，安稳心理，助益睡眠，放松心情#中医养生#养生_清晰 480P.mp4',
	  train_time_sum:'60'
    };
      }else if (id == 19) {
        this.classid = 19;
        this.zhengnianclass = {
      title: '埙音能促进全身气机的协调与稳定调节脾胃之气的升降，防止气的升降絮乱，缓解焦虑和压力，安稳身心，治愈，土音入脾「五脏相音」',
      titleen: 'jyjs',
      studyNum: '335',
      review: '35',
      time: '2024-8-8',
      synopsis: '埙音能促进全身气机的协调与稳定调节脾胃之气的升降，防止气的升降絮乱，缓解焦虑和压力，安稳身心，治愈，土音入脾「五脏相音」',
      vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/19/Cover.jpg',
      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/19/埙音能促进全身气机的协调与稳定调节脾胃之气的升降，防止气的升降絮乱，缓解焦虑和压力，安稳身心，治愈，土音入脾「五脏相音」_清晰 480P.mp4',
	  train_time_sum:'60'
    };
      }else if (id == 20) {
        this.classid = 20;
        this.zhengnianclass = {
      title: '养脾健胃，安稳身心，缓解焦虑，保肺气，利肾水，补肺利肾泄心火，治愈，土音入脾「五脏相音」',
      titleen: 'jyjs',
      studyNum: '335',
      review: '35',
      time: '2024-8-8',
      synopsis: '养脾健胃，安稳身心，缓解焦虑，保肺气，利肾水，补肺利肾泄心火，治愈，土音入脾「五脏相音」',
      vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/20/Cover.jpg',
      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/20/养脾健胃，安稳身心，缓解焦虑，保肺气，利肾水，补肺利肾泄心火，治愈，土音入脾「五脏相音」_清晰 480P.mp4',
	  train_time_sum:'60'
    };
      }else if (id == 21) {
        this.classid = 21;
        this.zhengnianclass = {
      title: '有暴饮暴食或食欲不振者可常听用。土音入脾，缓解焦虑，安稳心理，助益睡眠，静心冥想，放松治愈',
      titleen: 'jyjs',
      studyNum: '335',
      review: '35',
      time: '2024-8-8',
      synopsis: '有暴饮暴食或食欲不振者可常听用。土音入脾，缓解焦虑，安稳心理，助益睡眠，静心冥想，放松治愈',
      vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/21/Cover.jpg',
      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/21/有暴饮暴食或食欲不振者可常听用。土音入脾，缓解焦虑，安稳心理，助益睡眠，静心冥想，放松治愈#中医养生#养生_清晰 480P.mp4',
	  train_time_sum:'60'
    };
      }else if (id == 22) {
        this.classid = 22;
        this.zhengnianclass = {
      title: '助益睡眠，气色不佳，焦虑失眠适用，缓解紧张，安稳身心，释放压力，治愈，土音入脾「五脏相音」',
      titleen: 'jyjs',
      studyNum: '335',
      review: '35',
      time: '2024-8-8',
      synopsis: '助益睡眠，气色不佳，焦虑失眠适用，缓解紧张，安稳身心，释放压力，治愈，土音入脾「五脏相音」',
      vidImg: 'http://xinli.g60health.com:8000/xinliimg/music/t/22/Cover.jpg',
      vidUrl: 'http://xinli.g60health.com:8000/xinliimg/music/t/22/助益睡眠，气色不佳，焦虑失眠适用，缓解紧张，安稳身心，释放压力，治愈，土音入脾「五脏相音」_清晰 480P.mp4',
	  train_time_sum:'60'
    };
      }
    },
	
    showPreviousWeeksModal() {
		this.classid = 7;
      this.showModal = true;
    },
    closeModal() {
      this.showModal = false;
    }
  },
  // 分享小程序
  onShareAppMessage(res) {
    return {
      title: '正念减压训练'
    };
  }
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f2f5f9;
}

.MainBox {
  width: 750rpx;

  video {
    width: 750rpx;
  }
}

.cssBox {
  padding: 20rpx 30rpx;
  background-color: #FFFFFF;
  margin-bottom: 15rpx;
}

.rightBox {
  width: 150rpx;
  height: 100%;
  position: absolute;
  right: 20rpx;
  top: 0;
  text-align: center;
  line-height: 120rpx;
  padding: 0;
  background: none;
}

.courseBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: -10px;

  view {
    width: 240rpx;
    height: 58rpx;
    border: 2rpx solid #909399;
    text-align: center;
    line-height: 58rpx;
    border-radius: 12rpx;
    margin: 10rpx 0 20rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    word-break: break-all;
    font-size: 24rpx;
    color: #909399;
    padding: 0 6rpx;
  }

  .active {
    border: 2rpx solid #2979ff;
    background-color: #2979ff;
    color: #FFFFFF;
  }

  ::after {
    content: "";
    flex: auto;
  }

  > view {
    margin-left: 10px;
    margin-bottom: 10px;
    width: calc((100% - 10px*3) / 3);
  }
}

button::after {
  border: none;
  padding: 0;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  width: 80%;
  max-width: 600rpx;
}

.modal-options {
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;

  view {
    padding: 10rpx;
    border: 1rpx solid #ccc;
    margin-bottom: 10rpx;
    border-radius: 5rpx;
    cursor: pointer;
  }
}
</style>